<script setup lang="ts">
import {Page, useVbenModal} from '@vben/common-ui'
import {useVbenVxeGrid} from "#/adapter/vxe-table";
import {form_schema, table_columns} from "#/views/toc/podcast/type-data";
import {requestClient} from "#/api/request";
import {useVbenForm} from "#/adapter/form";
import {AppDomain} from "#/views/toc/data";

const [Grid,gridApi]=useVbenVxeGrid({
  gridOptions:{
    height:'100%',
    checkboxConfig: {
      highlight: true,
      labelField: 'name',
    },
    columns:table_columns,
    keepSource: true,
    proxyConfig:{
      ajax:{
        query:async ({page}:any)=>{
          return requestClient.get('/platform/podcast-category/page',{params:{...page}})
        }
      }
    },
    toolbarConfig: {
      custom: true,
      export: true,
      // import: true,
      refresh: true,
      zoom: true,
    },
  }
})
const [Form,formApi]=useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  showDefaultActions: false,
  layout: 'vertical',
  schema:form_schema,
})
const [Model,modalApi]=useVbenModal({
  destroyOnClose:true,
  onConfirm:async ()=>{
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    const data = await formApi.getValues();
    data.categoryId='-1';
    if(data.id){
      await requestClient.put('/platform/podcast-category/update', data)
    }else {
      if (!data.pid){
        data.pid=0
      }
      await requestClient.post('/platform/podcast-category/create',data)
    }
    //处理提交
    await modalApi.close();
    await gridApi.reload();
  }
})
const add=async ()=>{
  await modalApi.open()
}
const edit=async (row:any)=>{
  await modalApi.open()
  await formApi.setValues(row,false)
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <el-button @click="add">新增</el-button>
      </template>
      <template #option="{row}">
        <el-button link @click="edit(row)">修改</el-button>
      </template>
      <template #domain="{row}">
        {{AppDomain[row.domain]}}
      </template>
    </Grid>
    <Model>
      <Form/>
    </Model>
  </Page>
</template>

<style scoped lang="scss">

</style>
